<template>
    <div class="xm-details">
        <van-nav-bar
            title="面经详细"
            left-text="返回"
            @click-left="onClickLeft"
        />
        <div class="content">
            <h2>{{ info.stem }}</h2>
            <p class="label">{{ label }}</p>
            <div class="user-info">
                <img class="avatar" :src="info.avatar" alt="" />
                <span>{{ info.creator }}</span>
            </div>
            <p class="text">{{ plainContent }}</p>
        </div>
        <div class="btn-group">
            <van-button
                class="xm-btn"
                :class="{ 'active-btn': info.likeFlag }"
                icon="like-o"
                @click="handleOpt(1)"
            />
            <van-button
                class="xm-btn"
                :class="{ 'active-btn': info.collectFlag }"
                icon="star-o"
                @click="handleOpt(2)"
            />
        </div>
    </div>
</template>

<script>
import {
  INTERVIEW_DETAILS_API,
  INTERVIEW_DETAILS_OPT_API
} from '@/constant/api'
import HttpTools from '@/utils/http'

export default {
  name: 'XmDetails',
  data () {
    return {
      id: '',
      info: {}
    }
  },
  computed: {
    label () {
      return `${this.info.createdAt} | ${this.info.views} 浏览量 | ${this.info.likeCount} 点赞数`
    },
    plainContent () {
      // 使用正则表达式去除 HTML 标签
      return this.info.content
        ? this.info.content.replace(/<[^>]+>/g, '')
        : ''
    }
  },
  created () {
    this.id = this.$route.query.id // 获取路由参数
    this.getInfo()
  },
  methods: {
    async getInfo () {
      const res = await HttpTools.get(INTERVIEW_DETAILS_API, {
        id: this.id
      })
      this.info = res?.data || {}
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    async handleOpt (optType) {
      if (optType === 1) {
        this.info.likeFlag = Number(!this.info.likeFlag)
      } else {
        this.info.collectFlag = Number(!this.info.collectFlag)
      }
      await HttpTools.post(INTERVIEW_DETAILS_OPT_API, {
        id: this.id,
        optType
      })
      this.getInfo()
    }
  }
}
</script>

<style lang="less" scoped>
.xm-details {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .content {
        width: 100%;
        flex: 1;
        padding: 0 10px 10px;
        box-sizing: border-box;

        .label {
            color: #999;
            font-size: 12px;
        }

        .user-info {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #999;
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .text {
            font-size: 14px;
        }
    }
    .btn-group {
        position: fixed;
        right: 20px;
        bottom: 30px;
        .xm-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .active-btn {
            background-color: #fec635;
        }
    }
}
</style>
